<template>
	<view>
		<u-search placeholder="请输入文件名" v-model="keyword" @search="searchHandel" :clearabled="true"
			:showAction="false"></u-search>


		<u-cell-group>
			<u-cell size="large" v-for="(item, index) in FileList" :key="index" :title="item.name" :label="item.createTime"
				@click.stop="deteleHandel(item)">
				<u-icon slot="icon" size="40" name="file-text" color="#4C75FF"></u-icon>

				<view slot="value" @click.stop="moreHandel(item)">
					<u-icon slot="icon" size="20" name="more-dot-fill" color="#4C75FF"></u-icon>
				</view>

			</u-cell>
		</u-cell-group>


		<u-popup :show="show" @close="show = false">
			<view class="file_name">{{ fileObj.name }}</view>
			<view class="menu">

				<u-icon name="share-square" color="#4C75FF" size="35" label="协作/分享" labelPos="bottom"></u-icon>
				<u-icon name="eye" color="#4C75FF" size="35" label="预览" labelPos="bottom" @click="preview"></u-icon>
				<u-icon name="edit-pen" color="#4C75FF" size="35" label="重命名" labelPos="bottom"></u-icon>
				<u-icon name="trash" color="#4C75FF" size="35" label="删除" labelPos="bottom"></u-icon>

			</view>
		</u-popup>


	</view>
</template>

<script>
import { getUserFileList } from '@/api/api'
export default {
	data() {
		return {
			keyword: "",
			FileList: [],
			fileObj: {},
			show: false,
		};
	},
	methods: {
		searchHandel(e) {
			getUserFileList({ name: e, queryType: "NORMAL" }).then(res => {
				this.FileList = res.data.rows
			})
		},

		deteleHandel(e) {
			uni.navigateTo({
				url: `/pages/index/detail/detail?fileId=${e.fileId}`,
			});
		},

		moreHandel(e) {
			this.fileObj = e
			this.show = true
		},

		preview() {
			uni.navigateTo({
				url: `/pages/index/detail/detail?fileId=${this.fileObj.fileId}`,
			});
			this.show = false
		},
	},
}
</script>

<style lang="less">
.menu {
	display: flex;
	justify-content: space-around;
	margin-bottom: 30rpx;
}

.file_name {
	font-size: 40rpx;
	font-weight: 400;
	color: #636363;
	padding: 50rpx 0 0 50rpx;
}
</style>
